import BasicMapUtils from './BasicMapUtils'

const ol = window.ol
const iconSrc = require('assets/images/situational-awareness/passenger-station-icon.png')
const iconActiveSrc = require('assets/images/situational-awareness/bus-station-icon-active.png')
const icon = iconSrc
const markerIconActive = new ol.style.Style({
  image: new ol.style.Icon({
    src: iconActiveSrc
  })
})
const markerIcon = new ol.style.Style({
  image: new ol.style.Icon({
    src: icon
  })
})
// const passengerStationList = [
//   {
//     level: 3,
//     lonLat: [108.314786, 22.821154]
//   },
//   {
//     level: 2,
//     lonLat: [108.330098, 22.819045]
//   },
//   {
//     level: 1,
//     lonLat: [108.307876, 22.838096]
//   },
//   {
//     level: 1,
//     lonLat: [108.317876, 22.848096]
//   }
// ]

let overlay = ''

class PassengerStation extends BasicMapUtils {
  constructor(thisVue) {
    super()
    this.passengerStationList = []
    this.thisVue = thisVue
    this.mapMarker = []
    this.listenerHandle = null
    // this.initPassengerStation()
  }

  initPassengerStation() {
    this.mapView.animate({ zoom: 15.1 })
    this.passengerStationList = this.thisVue.getStationList()
    this.removeLayers()
    this.addMarker()
    this.addEventListener()
  }

  addEventListener () {
    if (this.listenerHandle) {
      ol.Observable.unByKey(this.listenerHandle)
    }
    this.listenerHandle = this.map.on('click', e => {
      const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
        return feature
      })
      overlay && overlay.setPosition(undefined)
      this.mapMarker.forEach(item => {
        item.markerFeature.setStyle(markerIcon)
      })
      if (feature) {
        if (feature.get('userData').type === 'marker') {
          // console.log('bus-station-data', feature.get('userData'))
          this.thisVue.setStationData(feature.get('userData').id)
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.passenger-station-dialog'),
            position: e.coordinate
          })
          this.map.addOverlay(overlay)
          feature.setStyle(markerIconActive)
        }
      }
    })
  }
  addMarker() {
    this.passengerStationList.forEach((item, index) => {
      const p = item.bjrXm.split(',').map(fl => {
        return parseFloat(fl)
      })
      const centerPoint = new ol.geom.Point(p)
      this.coordTransform.convertGeoIntoMap(centerPoint)
      this.mapView.animate({ center: centerPoint.getCoordinates() })
      const markerObject = this.createMarker({ x: centerPoint.getCoordinates()[0], y: centerPoint.getCoordinates()[1], icon, userData: item, anchor: [0.5, 0.5] })
      this.mapMarker.push(markerObject)
      this.map.addLayer(markerObject.markerLayer)
      document.querySelector('#dot-' + (index + 1)).setAttribute('class', 'dot-' + item.level)
    })
  }
  // 事件触发高亮选中站点
  setActiveMarker (e) {
    if (this.passengerStationList.length > 0) {
      this.passengerStationList.forEach(item => {
        if (e.id === item.id) {
          const p = item.bjrXm.split(',').map(fl => {
            return parseFloat(fl)
          })
          const centerPoint = new ol.geom.Point(p)
          this.coordTransform.convertGeoIntoMap(centerPoint)
          this.mapView.animate({ center: centerPoint.getCoordinates() })
          overlay && overlay.setPosition(undefined)
          this.mapMarker.forEach(item => {
            item.markerFeature.setStyle(markerIcon)
          })
          this.thisVue.setStationData(e.id)
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.passenger-station-dialog'),
            position: centerPoint.flatCoordinates
          })
          this.map.addOverlay(overlay)
          this.mapMarker[e.index].markerFeature.setStyle(markerIconActive)
        }
      })
    }
  }

  // 重置高亮显示的点
  resetMarker () {
    overlay && overlay.setPosition(undefined)
    this.mapMarker.forEach(item => {
      item.markerFeature.setStyle(markerIcon)
    })
  }

  removeLayers () {
    if (this.mapMarker.length > 0) {
      this.mapMarker.forEach(item => {
        this.map.removeLayer(item.markerLayer)
      })
      this.mapMarker = []
    }
  }
}

export default PassengerStation
